<!-- 预约记录 -->
<template>
  <div class="appointManage">
    <el-card>
      <div class="opt_wrap">
        <div class="opt_wrap_left">
          <p>
            已选中<span style="color: #1796EB">{{ selectedNum }}</span
            >项
          </p>
          <p v-if="showBtn" @click="showDelModal = true">
            <i class="iconfont icon-shanchu1"></i>
            删除
          </p>
          <p v-if="showBtn && selectedNum === 1" @click="arriveModal = true">
            <i class="iconfont icon-ESGC_yidaofang"></i>
            已到访
          </p>
        </div>
        <div class="opt_wrap_right">
          <p>
            <i class="iconfont icon-daochu"></i>
            导出
          </p>
          <p
            class="add"
            @click="goToURL('appointDetail', { pageType: 'create' })"
          >
            <i
              class="iconfont icon-xinjian1"
              style="color: white; font-size: 12px; margin-right: 4px;"
            ></i>
            新增
          </p>
        </div>
      </div>
      <div class="search_wrap">
        <el-input
          placeholder="潜客姓名/名称/预约者"
          v-model="searchCondition"
          clearable
          style="width: 260px;"
          @keyup.enter.native="queryListData"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-date-picker
          v-model="queryDate"
          @change="queryListData"
          type="daterange"
          range-separator="~"
          start-placeholder="预约开始时间"
          end-placeholder="预约结束日期"
        >
        </el-date-picker>
      </div>
      <div class="table_list">
        <el-table
          ref="nicheTable"
          :data="tableListData"
          min-height="500"
          border
          v-loading="loading"
          @selection-change="handleSelectionNiche"
          style="width: 100%"
        >
          <el-table-column type="selection" align="center" width="40" />
          <el-table-column
            v-for="(item, index) in tableCaption"
            :key="index"
            :label="item.label"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="item.value !== 'name'">{{
                scope.row[item.value]
              }}</span>
              <span
                v-if="item.value === 'name'"
                @click="
                  goToURL('appointDetail', {
                    pageType: 'details',
                    id: scope.row.id
                  })
                "
                class="see_detail"
                >{{ scope.row[item.value] }}</span
              >
            </template>
          </el-table-column>
        </el-table>
        <link-pagination
          :total="total"
          :currentPage="currentPage"
          :limit="limit"
          v-if="total != 0"
          @pagination="getPaginationParams"
        ></link-pagination>
      </div>
    </el-card>
    <!-- 删除弹框 -->
    <el-dialog
      title="提示"
      width="510px"
      :visible.sync="showDelModal"
      class="del_modal"
    >
      <div class="content">
        <p><i class="iconfont icon-tishi"></i></p>
        <!-- <p v-if="selectionCustomer.length === 1">是否将客户<span>{{ selectionCustomer[0].name }}删除？</span></p>
        <p v-if="selectionCustomer.length > 1">是否将<span>{{ selectionCustomer[0].name }}、{{ selectionCustomer[1].name }}<span v-if="selectionCustomer.length > 2">等</span>{{ selectionCustomer.length }}位客户删除？</span></p> -->
        <p>删除成功之后，该操作将无法恢复</p>
      </div>
      <div class="btn">
        <el-button @click="showDelModal = false">返回</el-button>
        <el-button type="primary" @click="confirmDelete">确认</el-button>
      </div>
    </el-dialog>
    <!-- 已到访弹框 -->
    <el-dialog title="客户到访" width="510px" :visible.sync="arriveModal">
      <div>
        <el-form
          ref="arriveForm"
          :model="arriveFormData"
          :rules="arriveFormrules"
          label-width="150px"
        >
          <el-form-item label="到访客户：">
            <p>
              {{ arriveCustomer
              }}<span v-if="selectedNum > 1">等{{ selectedNum }}名潜客</span>
            </p>
          </el-form-item>
          <!-- <el-form-item label="到访标题：" prop="title">
            <el-input v-model="arriveFormData.title" style="width: 218px;"></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="到访属性：" prop="property">
            <el-select v-model="arriveFormData.property" placeholder="请选择">
              <el-option
                  v-for="item in visitProperty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="到访时间：" prop="visit_time">
            <el-date-picker
              v-model="arriveFormData.visit_time"
              type="datetime"
              placeholder="到访时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="到访中心：" prop="property">
            <el-select v-model="arriveFormData.branch_name" placeholder="请选择">
              <el-option
                v-for="item in visitProperty"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="btn">
        <el-button @click="arriveModal = false">返回</el-button>
        <el-button type="primary" @click="confirmArrive">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { paginationMixin } from "@/mixin";
import { formatDate } from "@/utils";
import http from "@/api/appoint";
import visitHttp from "@/api/visit";
import globalHttp from "@/api/global";
export default {
  name: "appointManage",
  mixins: [paginationMixin],
  data() {
    return {
      selectionCustomer: [],
      http: http,
      selectedNum: 0,
      showBtn: false,
      showDelModal: false,
      searchCondition: null,
      queryDate: null,
      step: null,
      types: null,
      loading: false,
      arriveModal: false,
      arriveCustomer: "",
      arriveFormData: {},
      arriveFormrules: {},
      total: 1,
      // centerList: [],
      tableCaption: [
        {
          label: "潜客姓名",
          value: "name"
        },
        {
          label: "名称",
          value: "title"
        },
        {
          label: "预约中心",
          value: "branch_name"
        },
        {
          label: "预约时间",
          value: "appoint_time"
        },
        {
          label: "到访时间",
          value: "visit_time"
        },
        {
          label: "创建时间",
          value: "create_time"
        },
        {
          label: "预约者",
          value: "username"
        }
      ],
      tableListData: [],
      delNiche: [],
      visitProperty: []
    };
  },
  methods: {
    goToURL(name, params) {
      this.$router.push({ name, params });
    },
    queryListData() {
      this.getListData();
    },
    confirmDelete() {
      let id = this.delNiche;
      http.deleteContent({ id }).then(res => {
        this.$message.success(res.msg || "删除成功！");
        this.showDelModal = false;
        this.getListData();
      });
    },
    handleSelectionNiche(val) {
      console.log(val, "1111");
      this.selectionCustomer = val;
      if (this.selectionCustomer.length) {
        this.arriveFormData.title = this.selectionCustomer[0].title;
      }
      this.selectedNum = this.selectionCustomer.length;
      if (this.selectionCustomer[0]) {
        this.arriveCustomer = this.selectionCustomer[0].name;
      }
      if (this.selectedNum === 0) {
        this.showBtn = false;
      } else {
        this.showBtn = true;
      }
      if (this.selectionCustomer.length !== 0) {
        this.delNiche = [];
        for (let item of this.selectionCustomer) {
          this.delNiche.push(item.id);
        }
      }
      this.delNiche = JSON.parse(JSON.stringify(this.delNiche));
      console.log(this.delNiche);
    },
    confirmArrive() {
      this.$refs["arriveForm"].validate(valid => {
        if (valid) {
          let userData = JSON.parse(sessionStorage.getItem("user"));
          this.arriveFormData.center_id = userData.center_id;
          this.arriveFormData.appoint_id = this.selectionCustomer[0].id;
          this.arriveFormData.user_id = this.selectionCustomer[0].user_id;
          this.arriveFormData.visit_time = formatDate.toStr(
            new Date(this.arriveFormData.visit_time),
            "YYYY-MM-DD HH:mm:ss"
          );
          let params = this.arriveFormData;
          visitHttp.createContent(params).then(res => {
            this.$message.success(res.msg || "创建到访记录成功！");
            this.arriveModal = false;
            this.getListData();
          });
        }
      });
    },
    getListData(
      page = this.currentPage,
      list_rows = this.limit,
      search = this.searchCondition
    ) {
      this.loading = true;
      let params = { page, list_rows, search };
      if (this.queryDate) {
        params["create_time_start"] = formatDate.toStr(
          new Date(this.queryDate[0]),
          "YYYY-MM-DD"
        );
        params["create_time_end"] = formatDate.toStr(
          new Date(this.queryDate[1]),
          "YYYY-MM-DD"
        );
      }
      http.getList(params).then(res => {
        this.loading = false;
        this.total = res.data.total;
        let tableListData = res.data.data;
        if (tableListData.length) {
          tableListData.map(item => {
            item.birthday = formatDate.toStr(
              new Date(item.birthday),
              "YYYY-MM-DD"
            );
            item.sex = item.sex === 1 ? "男" : "女";
          });
        }
        this.tableListData = tableListData;
      });
    },
    // 预约属性
    getVisitProperty() {
      let varname = "visit_property";
      globalHttp.getWebConfig({ varname }).then(res => {
        this.visitProperty = res.data;
      });
    }
  },
  created() {
    this.getListData();
    this.getVisitProperty();
  }
};
</script>

<style lang="scss" scoped>
.appointManage {
  padding: 10px;
  .opt_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 34px;
    &_left {
      display: flex;
      p {
        margin-right: 18px;
        color: #565656;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: #1796eb;
        }
        &:nth-of-type(1) {
          cursor: default;
          color: #646464;
          &:hover {
            color: #646464;
          }
        }
      }
    }
    &_right {
      display: flex;
      align-items: center;
      p {
        margin-left: 18px;
        color: #565656;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: #1796eb;
        }
      }
      .add {
        width: 72px;
        height: 30px;
        background: linear-gradient(top left, #17b5eb, #1796eb);
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        cursor: pointer;
        border-radius: 5px;
        &:hover {
          color: white;
        }
      }
    }
  }
  .search_wrap {
    margin-top: 34px;
    margin-bottom: 34px;
    div {
      margin-right: 17px;
    }
  }
  .see_detail {
    cursor: pointer;
    color: #1796eb;
  }
  .btn {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    /deep/ .el-button {
      width: 214px;
    }
  }
  .del_modal {
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      p {
        &:nth-of-type(1) {
          width: 92px;
          height: 92px;
          border-radius: 50%;
          background: linear-gradient(to bottom, #f25851, #f27350);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 18px;
          i {
            font-size: 40px;
            color: white;
          }
        }
        &:nth-of-type(2) {
          font-size: 20px;
          color: #333;
        }
        &:nth-of-type(3) {
          font-size: 14px;
          color: #999;
          margin-top: 7px;
        }
      }
    }
  }
}
</style>
